/*
 * @Author: 梁青春
 * @Date: 2025-02-24 09:47:14
 * @LastEditTime: 2025-02-24 10:27:51
 * @LastEditors: 梁青春
 */
import * as maptalks from 'maptalks-gl'
const MAP_URL = import.meta.env.VITE_APP_BASE_API_MAP
let map, glMap
/**
 * 初始化地图
 * @param {dom} dom 传入daom
 * @param {*} config 配置参数
 * @param {Array} config.center=[116.3974,39.909041] 默认地图中心坐标
 * @param {Array} config.zooms=[3, 18] 默认地图层级范围
 * @param {String} config.style=cobalt 默认地图中心坐标 [cobalt,lightColor,hybrid]
 * @param {String} config.extent=null 默认地图中心坐标
 * @param {String} config.pitch=80 默认地图中心坐标
 */
export function init(dom, config) {
  const { center = [116.3974, 39.909041], zooms = [3, 18], style = 'cobalt', extent, pitch } = config
  map = new maptalks.Map(dom, {
    center: center,
    zoom: 11,
    attribution: {
      position: { bottom: '8px' },
      content: `<span style='color: #fff;background: rgba(0,0,0,0.2);padding: 6px;'>&copy; <a href='http://www.hy9909.com/' target='_blank'>恒源水务</a></span>`
    },
    maxExtent: extent,
    maxPitch: pitch,
    fogColor: [216, 240, 255],
    lights: {
      ambient: {
        // 天空盒
        // resource,
        exposure: 0.78,
        hsv: [216, 240, 255],
        orientation: 0
      },
      directional: {
        direction: [0.5, 0, -1],
        color: [216, 240, 255]
      }
    }
  })

  let url = `${MAP_URL}/${style}/{z}/{x}/{y}.jpg`

  if (style === 'cobalt') url = `${MAP_URL}/${style}/{z}/{x}/{y}.png`
  if (style === 'lightColor') url = `${MAP_URL}/${style}/roadmap/{z}/{x}/{y}.png`

  // 地图图层
  const tileLayer = new maptalks.TileLayer('mapLayer', {
    urlTemplate: url,
    maxAvailableZoom: 18
  })

  // 文字图层
  const labelLayer = new maptalks.TileLayer('labelLayer', {
    urlTemplate: `${MAP_URL}/${style}/overlay_r/{z}/{x}/{y}.png`
  })
  const baseLayer = [tileLayer]
  if (style === 'lightColor') baseLayer.push(labelLayer)

  map.setMaxZoom(Number(zooms[1]))
  map.setMinZoom(Number(zooms[0]))
  const sceneConfig = {
    environment: {
      enable: true, // 是否开启环境天空盒绘制
      mode: 1, // 天空盒模式： 0: 氛围模式， 1: 实景模式
      level: 0, // 实景模式下的模糊级别，0-3
      brightness: 0.489 // 天空盒的明亮度，-1 - 1， 默认为0
    },
    shadow: {
      type: 'esm', // 阴影模式，固定为esm
      enable: true, // 是否开启
      quality: 'high', // 阴影质量，可选的值：high, medium, low
      opacity: 1, // 阴影的透明度，0 - 1
      color: [0, 0, 0], // 阴影的颜色，归一化三位rgb颜色值
      blurOffset: 1 // 阴影模糊偏移量，值越高阴影越模糊
    },
    ground: {
      enable: false, // 是否开启地面绘制
      renderPlugin: {
        // 地面的绘制插件，取值范围 lit 或者 fill
        type: 'lit'
      },
      symbol: {
        ssr: true, // 是否开启ssr，屏幕空间反射
        polygonFill: [0.1, 1, 0.6, 1], // 四位归一化颜色值
        polygonOpacity: 1 // 透明度 0-1
      }
    },
    postProcess: {
      enable: true, // 是否开启后处理
      antialias: {
        enable: true, // 是否开启FXAA后处理
        taa: true // 是否开启taa后处理
      },
      ssr: {
        enable: true // 是否开启屏幕空间反射
      },
      ssao: {
        enable: true, // 是否开启屏幕空间环境光遮蔽
        bias: 0.36, // 阴影偏移值，越大，阴影就越清晰，0.05 - 1
        radius: 0.05, // 遮蔽半径，越大，阴影就越清晰， 0.05 - 1
        intensity: 0.3 // 强度因子， 0.1 - 5
      },
      sharpen: {
        enable: false, // 是否开启锐化
        factor: 0.2 // 强度因子，0 - 1
      },
      bloom: {
        enable: true, // 是否开启泛光
        factor: 1, // 强度因子 0.1 - 5
        threshold: 0, // 最小阈值（亮度低于阈值的区域不发光） 0 - 1
        radius: 1 // 泛光半径 0.1 - 4
      },
      outline: {
        enable: true // 是否开启高亮后处理
      }
    }
  }

  let glOptions = { sceneConfig }
  glMap = new maptalks.GroupGLLayer('maptalksGl_3D', baseLayer, glOptions).addTo(map)
  return glMap
}

// 根据id查询图层
export function hasLayer(map, id) {
  return map.getLayer(id)
}

/**
 * 添加点
 * @param {*} map map
 * @param {*} data 点数据
 * @param {*} symbol 点样式
 * @param {*} layerName 点集合的图层名称
 * @param {*} callback click返回函数
 * @returns 点集合的图层
 */
export function addMarkPoint(map, markers, layerName = 'MarkerLayer') {
  let MarkerLayer = map.getLayer(layerName)
  if (!MarkerLayer) MarkerLayer = new maptalks.PointLayer(layerName, { collision: true }).addTo(map)
  MarkerLayer.clear()
  MarkerLayer.addGeometry(markers)
  return MarkerLayer
}

/**
 * 添加聚合点
 * @param {*} map map
 * @param {*} data 点数据
 * @param {*} layerName 点集合的图层名称
 * @param {*} callback click返回函数
 * @returns 点聚合的图层
 */
export function addMarkPoints(map, data, layerName = 'ClusterLayer', callback) {
  let layers = []
  let ClusterLayer = map.getLayer(layerName)
  if (!ClusterLayer) ClusterLayer = new ClusterLayer(layerName, { zIndex: 99 }).addTo(map)

  data.forEach(item => {
    const marker = new maptalks.Marker([item.longitude, item.latitude], {
      properties: {
        name: item.name
      },
      cursor: 'pointer',
      symbol: [
        {
          markerFile: item.markerFile,
          markerWidth: 30,
          markerHeight: 42
        }
      ]
    })
    marker.on('click', e => {
      callback(item, e)
    })
    layers.push(marker)
  })
  ClusterLayer.addMarker(layers)
  return ClusterLayer
}

/**
 * 添加地图边界
 * @param {*} map map
 * @param {*} geojson 边界GeoJson
 * @param {*} style
 * @param {*} layerName=areaBorderLayer 图层名称
 */
export function addAreaBorder(map, geojson, style, layerName = 'areaBorderLayer') {
  const layer = new maptalks.GeoJSONVectorTileLayer(layerName, {
    data: geojson,
    awareOfTerrain: true,
    style
  }).addTo(map)
  return layer
}

/**
 * 设置地形
 * @param {string} urlTemplate 地形图片地址
 */
export function setTerrain(map, urlTemplate = `${MAP_URL}/terrain/{z}/{x}/{y}.png`) {
  return isShow => {
    if (isShow) {
      const terrain = {
        tileSize: 256,
        type: 'mapbox',
        urlTemplate: urlTemplate,
        maxAvailableZoom: 12,
        shader: 'lit',
        debug: false,
        material: {
          baseColorFactor: [1, 1, 1, 1],
          outputSRGB: 1,
          roughnessFactor: 0.69,
          metallicFactor: 0
        }
      }
      map.setTerrain(terrain)
    } else {
      map.removeTerrain()
    }
  }
}
